<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品信息表格</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        .none{
            width: 200px;
            height: 300px;
            background-color: pink;
            margin: auto;
            display: none;
        }
    </style>
</head>
<body>

    名称:<input type="text" name="" id="name">
    价格:<input type="text" name="" id="price">
    库存:<input type="text" name="" id="stock">

    <button onclick="add()">添加</button>

    <table>
        <thead>
 <tr>
            <th>id</th>
            <th>名称</th>
            <th>价格</th>
            <th>库存</th>
            <th>操作</th>
        </tr>

        </thead>
       <tbody>
            
        </tbody>
      
        
    </table>

    <div class="none">
        名称:<input type="text" name="" id="name_pud">
        <br>
        价格:<input type="text" name="" id="price_pud">
        <br>
        库存:<input type="text" name="" id="stock_pud">
        <br>
        <button onclick="pudate()">修改</button>
    </div>
        
</body>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script>
    function apply(){

        $.ajax({
            type:'get',
            url:'http://localhost:3000/users/list',
            dataType:'json',
            success:function(data){
                console.log(data);
                $('tbody').html('')
                data.data.forEach(item => {
                    $('tbody').append(`
                    <tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${parseFloat(item.price)}</td>
                    <td>${parseFloat(item.stock)}</td>
                    <td><button onclick="del(${item.id})">删除</button> <button onclick="upd(${item.id})">修改</button></td>
                     </tr>
                    
                    `)
                });
            },
            error:function(err){
                console.log(err);
            }
        })
    }
    apply()

    function add() {
        $.ajax({
            type: 'post',
            url: 'http://localhost:3000/users/add',
            data: {
                name: $('#name').val(),
                price: $('#price').val(),
                stock: $('#stock').val(),
            },
         
            dataType: 'json',
            success: function (data) {
                console.log(data);
                apply();
            },
            error: function (err) {
                console.log(err);
            }
        });
    }


    function del(id) {
        $.ajax({
            type: 'post',
            url: `http://localhost:3000/users/del?id=${id}`,
            dataType: 'json',
            success: function (data) {
                console.log(data);
                apply();
            },
            error: function (err) {
                console.log(err);
            }
        });
    }
var iid
    function upd(id) {
         iid = id
         $('.none').show()
    }


    function pudate(){
        $.ajax({
            type: 'post',
            url: `http://localhost:3000/users/pud?id=${iid}`,
            data: {
                name: $('#name_pud').val(),
                price: $('#price_pud').val(),
                stock: $('#stock_pud').val(),
            },
         
            dataType: 'json',
            success: function (data) {
                console.log(data);
                $('.none').hide()
                apply();
            },
            error: function (err) {
                console.log(err);
            }
        });
    }

</script>
</html>